<template>
  <div>
    <!-- 查询条件 -->
    <div class="orderactivity-header">
      <div style="margin-bottom: 20px;">
       分配老人——当前员工（负责站点）： {{ task.name }} <span v-if="task.team_id && task.team">（{{ task.team.name }}）</span>
       </div>
      <div class="assign-header">
        <el-form :inline="true" :model="searchForm" ref="searchForm">
          <el-form-item>
            <el-button type="primary" icon="el-icon-position" @click="assign">批量绑定</el-button>
          </el-form-item>
          <el-form-item label="老人姓名" style="margin-left: 20px;" prop="name">
            <el-input v-model="searchForm.name" clearable placeholder="老人姓名" @change="clear" @clear="clear"></el-input>
          </el-form-item>
          <el-form-item label="是否绑定" prop="bind_status">
            <el-select v-model="searchForm.bind_status" clearable @clear="clear" @change="clear" placeholder="请选择是否绑定">
              <el-option label="全部" value="0"></el-option>
              <el-option label="未绑定" value="1"></el-option>
              <el-option label="已绑定" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="负责站点" prop="team_id">
            <el-select v-model="searchForm.team_id" clearable @change="clear" @clear="clear" placeholder="请选择负责站点">
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" :disabled="loading">查询</el-button>
            <el-button @click="onReset" :disabled="loading">重置</el-button>
          </el-form-item>
        </el-form>
        <i class="el-icon-close" style="font-size: 20px; color: #72767b;" @click="close"></i>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="contacts-content">
    <!-- Table组件 -->
    <main-table :columns="columns" :data="tableList" :pagination="pagination" @getData="fetchTableList" @handleSelectChange="handleSelectChange" @selectAll="selectAll" :loading="loading" wrapperHeight="calc(100vh - 180px)">
      <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
      <el-table-column slot="bind_name" label="负责护工" align="center" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.bind_name">{{ scope.row.bind_name }}</span>
          <span v-else>未绑定</span>
        </template>
      </el-table-column>
      <el-table-column slot="action" fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-popconfirm v-if="scope.row.bind_id.indexOf(task.id) == -1" :title="`确定要绑定该老人到‘${task.name}’员工吗？`" @confirm="assignone(scope.row)">
            <el-button slot="reference" size="mini" type="primary" class="button-edit-color d2-ml-10"><i class="fa fa-sitemap" aria-hidden="true"></i> 绑定</el-button>
          </el-popconfirm>
          <!-- <el-popconfirm v-if="scope.row.bind_id && scope.row.bind_id !== task.id" :title="`确定要绑定该老人到‘${task.name}’员工吗？`" @confirm="exchange(scope.row)">
            <el-button slot="reference" type="text" class="button-view-color"><i class="fa fa-exchange" aria-hidden="true"></i> 移动</el-button>
          </el-popconfirm> -->
          <el-popconfirm v-else title="确定将该老人解除绑定该员工吗？" @confirm="del(scope.row)">
            <el-button slot="reference" size="mini" type="success" class="button-delete-color d2-ml-10"><i class="fa fa-share-square-o" aria-hidden="true"></i> 解绑</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </main-table>
    </div>
  </div>
</template>
<script>
import * as APIOrder from '@/api/order'
import { unixToDate, sex, age, sourceType } from "@/utils"
import mainTable from "@/components/main-table/index";
export default {
  props: {
    task: {
      type: Object,
      default: () => {}
    },
    teamList: {
      type: Array,
      default: () => []
    }
  },
  components: { mainTable },
  computed: {
  },
  data () {
    return {
      // 查询条件
      searchForm: {
        page: 1
      },
      columns: [
        {
          selection: true,
          fixed: true
        },
        {
          index: true,
          fixed: true
        },
        {
          prop: 'name',
          label: '名称',
          width: 100,
          fixed: true
        },
        {
          prop: 'sex',
          label: '性别',
          width: 60,
          formatter (row, column, cellValue) {
            return sex(cellValue)
          }
        },
        {
          prop: 'birthday',
          label: '年龄',
          width: 60,
          formatter (row, column, cellValue) {
            return age(cellValue)
          }
        },
        {
          prop: 'source_type',
          label: '老人来源',
          width: 100,
          formatter (row, column, cellValue) {
            return sourceType(cellValue)
          }
        },
        {
          prop: 'address',
          label: '老人住址'
        },
        {
          slot: 'bind_name'
        },
        {
          prop: 'team_name',
          label: '负责站点',
          width: 200
        },
        {
          slot: 'action'
        }
      ],
      tableList: [],
      pagination: {
        current: 1,
        size: 15,
        total: 0
      },
      loading: false,
      selection: []
    }
  },
  mounted () {
    this.fetchTableList()
  },
  methods: {
    // 选中老人
    handleSelectChange (val) {
      this.selection = val
    },
    // 全选
    selectAll (val) {
      this.selection = val
    },
    // 关闭弹窗
    close () {
      this.$emit('close')
    },
    // 手动清空/搜索
    clear () {
      this.fetchTableList({ page: 1 })
    },
    // 批量添加老人
    assign () {
      if(this.selection.length == 0){
        this.$message({message: '请选择老人',type: 'error' })
        return false;
      }
      const arr = []
      this.selection.forEach(item => {
        arr.push(item.id)
      })
      APIOrder.orderbindBind({ oid: arr.join(','), servicer_id: this.task.id }).then(res => {
        this.$message({message: '绑定成功',type: 'success' })
        this.fetchTableList()
      })
    },
    del (row) {
      APIOrder.orderbindDelbind({ oid: row.id, servicer_id: this.task.id }).then(res => {
        this.$message({message: '解除绑定成功',type: 'success' })
        this.fetchTableList()
      })
    },
    assignone (row) {
      APIOrder.orderbindBind({ oid: row.id, servicer_id: this.task.id }).then(res => {
        this.$message({message: '绑定成功',type: 'success' })
        this.fetchTableList()
      })
    },
    // 移动老人
    exchange (row) {
      APIOrder.orderbindBind({ oid: row.id, servicer_id: this.task.id }).then(res => {
        this.fetchTableList()
      })
    },
    // 获取数据
    fetchTableList (pageObj) {
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...pageObj
      }
      APIOrder.ordermsgOlder(this.searchForm).then((resp) => {
        if (resp.code == 200) {
          const { list = [], total = 0 } = resp.data;
         this.tableList = list || []
         this.pagination.total = total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 点击”查询“按钮 => 此时缓存查询参数
    onSearch () {
      this.pagination = {
        current: 1,
        size: 15,
        total: 0
      }
      this.fetchTableList()
    },
    // 重置
    onReset () {
      this.$refs.searchForm.resetFields()
      this.fetchTableList()
    },
    // 操作
    showDetail (row) {
      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
  .assign-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .orderactivity-header{
     padding: 20px;
     padding-bottom: 0px;
  }
  .contacts-content {
   padding: 0 20px;
   padding-bottom: 7px;
  }
</style>
